<template>
  <div class="table-container">
    <div class="tab-box">
      <div
        v-for="(item, index) in typeList"
        :key="index"
        class="tab-box-item"
        :class="{ active: type === item.value }"
        @click="handleTabChange(item.value)"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="search-box">
      <el-form :inline="true">
        <el-form-item label="开播日期">
          <el-date-picker
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            style="width: 277px"
          />
        </el-form-item>
      </el-form>
      <el-button type="primary" style="width: 84px; height: 32px; background-color: #3c80ff">
        <el-icon><Search /></el-icon>
        <span class="m-l-10">查询</span>
      </el-button>
    </div>
    <div class="table-box">
      <!-- 总收益 -->
      <el-table
        v-loading="loading"
        :data="tableData"
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ textAlign: 'center' }"
        class="my-custom-table"
      >
        <el-table-column prop="index" label="序号" />
        <el-table-column prop="duration" label="房间类型" />
        <el-table-column v-if="type !== 6" prop="cycle" label="开播周期" />
        <el-table-column v-if="type === 1" prop="cycle" label="直播开始时间" />
        <el-table-column v-if="type === 1" prop="cycle" label="直播结束时间" />
        <el-table-column v-if="[2, 3].includes(type)" prop="cycle" label="送礼用户" />
        <el-table-column v-if="type === 5" prop="cycle" label="被送礼观众" />
        <el-table-column v-if="[2, 5].includes(type)" prop="cycle" label="送礼时间" />
        <el-table-column v-if="[1, 2, 5].includes(type)" prop="cycle" label="礼物名称" />
        <el-table-column v-if="type === 3" prop="cycle" label="送水晶时间" />
        <el-table-column v-if="type === 4" prop="cycle" label="点歌用户" />
        <el-table-column v-if="type === 4" prop="cycle" label="点歌时间" />
        <el-table-column v-if="type === 4" prop="cycle" label="完成时间" />
        <el-table-column v-if="type !== 6" prop="publishTime" label="礼物单价">
          <template #default="{ row }">
            <div class="expand">
              <span>{{ row.publishTime || "-" }}</span>
              <span v-if="row.publishTime" class="icon" style="background-color: lightcoral"></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="type !== 6" prop="progress" label="礼物数量" />
        <el-table-column v-if="type !== 6" prop="isTemp" label="总价值">
          <template #default="{ row }">
            <div class="expand">
              <span>{{ row.publishTime || "-" }}</span>
              <span v-if="row.publishTime" class="icon" style="background-color: lightcoral"></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="type === 6" prop="cycle" label="开播日期" />
        <el-table-column v-if="type === 6" prop="cycle" label="竞得用户" />
        <el-table-column v-if="type === 6" prop="cycle" label="出价时间" />
        <el-table-column v-if="type === 6" prop="cycle" label="竞得时间" />
        <el-table-column v-if="type === 6" prop="cycle" label="价格">
          <template #default="{ row }">
            <div class="expand">
              <span>{{ row.publishTime || "-" }}</span>
              <span v-if="row.publishTime" class="icon" style="background-color: lightcoral"></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="主播收益">
          <template #default="{ row }">
            <div class="expand">
              <span>{{ row.publishTime || "-" }}</span>
              <span v-if="row.publishTime" class="icon" style="background-color: blueviolet"></span>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <Pagination :total="total" :page="page" :limit="size" />
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "LiveEarning",
};
</script>
<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import Pagination from "@/components/Pagination/index.vue";

const total = ref(2);
const size = ref(10);
const page = ref(1);
const typeList = ref([
  {
    label: "总收益",
    value: 1,
  },
  {
    label: "礼物收益",
    value: 2,
  },
  {
    label: "守护水晶",
    value: 3,
  },
  {
    label: "点歌",
    value: 4,
  },
  {
    label: "礼物分成",
    value: 5,
  },
  {
    label: "深夜剧场",
    value: 6,
  },
]);
const type = ref(1);

const tableData = ref([
  {
    index: 1,
    duration: "5个月",
    cycle: "每周五11次",
    liveTime: "24h",
    product: "vivo手机",
    current: 10000,
    target: 10000,
    publishTime: "200",
    isTemp: "是",
    remark: "重要",
    gift: "未领取",
    status: 0,
  },
  {},
  {},
  {},
  {},
  {},
]);
const loading = ref(false);
const handleTabChange = (value: number) => {
  type.value = value;
  loading.value = true;
  const timer = setTimeout(() => {
    loading.value = false;
  }, 1000);
};
</script>

<style lang="scss" scoped>
.table-container {
  width: 100%;
  flex: 1;
  margin: 0 auto;
  border-radius: 25px;
  background: linear-gradient(180deg, #f0f5ff 0%, #fbfcfe 100%);
  box-shadow:
    inset 2px 1px 2px 1px #ffffff,
    0px 4px 8px 0px #eaf0ff;

  .tab-box {
    display: flex;
    padding: 30px 24px 22px;
    gap: 10px;
    &-item {
      padding: 6px 15px;
      border-radius: 17px;
      cursor: default;
    }
    .active {
      background-color: #dae0ff;
    }
  }
  .search-box {
    width: 100%;
    padding: 30px 24px;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ffffff;
    margin-bottom: 16px;
  }
  .table-box {
    padding: 0 24px;
    color: #4e5969;
    height: calc(100vh - 450px);
    overflow: hidden;
    .expand {
      display: flex;
      align-items: center;
      justify-content: center;
      .icon {
        width: 13px;
        height: 13px;
        border-radius: 50%;
        margin-left: 4px;
      }
    }
    .el-table {
      height: calc(100% - 60px);
    }
  }
}
</style>
